<template>
  <div class="seach">
    <el-autocomplete
      v-model="input"
      :fetch-suggestions="querySearch"
      class="input-seach"
      @select="handleSelect"
    >
      <template #append>
        <el-button class="buttom" :icon="Search" type="primary" @click="submit(input)">百度搜索</el-button>
      </template>
    </el-autocomplete>

  </div>
</template>

<script>
import { Search } from "@element-plus/icons-vue"
import fetchJsonp from "fetch-jsonp"
export default {
  data() {
    return {
      Search,
      input: "",
      timer: "",
      textList: [],
      querySearch: (queryString, callback) => {
        if(!queryString) return callback([])
        clearTimeout(this.timer)
        this.timer = setTimeout(()=>{
          fetchJsonp(
          "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + queryString,
          {
            jsonpCallback: "cb",
          }
        )
          .then(function (response) {
            return response.json()
          })
          .then(function (json) {
            console.log(json.s)
            const results = json.s.map(item=>{
              return {value: item}
            })
            callback(results)
          })
          .catch(function (ex) {
            callback()
            console.log("百度失败", ex)
          })
        }, 500)
      },
    }
  },
  watch: {},
  methods: {
    handleSelect(val) {
      console.log('handleSelect', val);
    },
    changeTextCB(val) {
      console.log("百度返回：", val)
    },
    submit(val) {
      if (!val) return
      window.location.href =
        "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=" +
        val
    },
  },
}
</script>
<style scoped lang="scss">
.seach {
  :deep(.input-seach) {
    width: 800px;
    height: 50px;
    .el-input .el-input__inner {
      height: 50px;
    }
  }
  :deep(.el-input-group__append) {
    background-color: var(--el-color-primary);
    color: var(--el-color-white);
    border-style: solid solid solid none;
    border: var(--el-color-primary) 1px;
    &:active {
      background-color: var(--el-color-primary-light-2);
      color: var(--el-color-white);
    }
  }
}
</style>
